<script>
  export default {
    data(){
      return {
        // tab标签的列表
        tabList: [
          {name: '关注', count: 10},
          {name: '推荐'},
          {name: '热榜', count: '99+'},
          {name: '搞笑'},
          {name: '视频'},
          {name: '科技'},
          {name: '音乐'},
          {name: '电影'},
          {name: '游戏'},
        ],
        // 当前tab的索引
        currentTabIndex: 0,
      }
    },
    methods: {
      onTabChange(index){
        this.currentTabIndex = index
      }
    }
  }
</script>


<template>
  <view class="container tn-safe-area-inset-bottom">
    <tn-nav-bar fixed>tabs标签</tn-nav-bar>
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <tn-tabs
        :list="tabList"
        :current="currentTabIndex"
        @change="onTabChange"
      ></tn-tabs>
    </view>
    <view class="tn-padding-bottom-lg"></view>
  </view>
</template>

<style lang="scss" scoped>
  .container {
    background-color: $tn-bg-gray-color;
    min-height: 100vh;
  }
</style>